<template>
  <div>
    <van-nav-bar
        title="关于我们"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
  </div>
    <div class="about-page">
        <section class="about-header">
            <h1>关于我们</h1>
            <p class="lead">探索我们的故事，感受我们的魅力</p>
        </section>
        <section class="about-content">
            <div class="content-block">
                <h2>我们的使命</h2>
                <p>致力于让每一位用户发现自己的美丽，绽放自信光彩</p>
            </div>
            <div class="content-block">
                <h2>我们的愿景</h2>
                <p>成为美丽与自信的引领者，让美丽触手可及</p>
            </div>
            <div class="content-block">
                <h2>我们的价值观</h2>
                <p>真诚、创新、卓越，为用户带来无与伦比的美丽体验</p>
            </div>
        </section>
    </div>
</template>

<script setup>
const onClickLeft = () => history.back();
</script>

<style scoped>
.about-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5; /* 添加了背景色，使页面更美观 */
}

.about-header {
    margin-bottom: 20px;
}

.about-header h1 {
    font-size: 28px; /* 增大标题字号 */
    color: #333; /* 设定标题颜色 */
    margin-bottom: 10px;
}

.about-header .lead {
    font-size: 18px;
    color: #666;
}

.about-content {
    width: 80%;
    margin: 0 auto;
}

.content-block {
    margin-bottom: 30px; /* 增大内容块间距 */
    border-bottom: 1px solid #ddd; /* 添加底部边框，增强可读性 */
    padding-bottom: 20px; /* 添加底部内边距 */
}

.content-block:last-child {
    border-bottom: none; /* 移除最后一个内容块的底部边框 */
}

.content-block h2 {
    font-size: 22px;
    color: #444; /* 设定小标题颜色 */
    margin-bottom: 15px;
}

.content-block p {
    font-size: 16px;
    line-height: 1.6;
    color: #777; /* 设定段落文字颜色 */
}
</style>
